

<template>
  <div id="basicLayout">
    <a-layout style="min-height: 100vh">
      <a-layout-sider :style="siderStyle">
          <global-header></global-header>
      </a-layout-sider>
      <a-layout>
        <a-layout-header :style="headerStyle">Header
        <a href="/about" target="_self">点我跳转</a>
        </a-layout-header>
        <a-layout-content :style="contentStyle"><router-view></router-view></a-layout-content>
<!--        <a-layout-footer :style="footerStyle">Footer</a-layout-footer>-->
      </a-layout>
    </a-layout>

  </div>

</template>
<script setup lang="ts">

import type { CSSProperties } from 'vue';
import GlobalHeader from '@/components/GlobalHeader.vue'
const headerStyle: CSSProperties = {
  textAlign: 'center',
  color: '#fff',
  height: 64,
  paddingInline: 50,
  lineHeight: '64px',
  backgroundColor: '#7dbcea',
};

const contentStyle: CSSProperties = {
  textAlign: 'center',
  minHeight: 120,
  lineHeight: '120px',
  color: '#fff',
  backgroundColor: '#108ee9',
};

const siderStyle: CSSProperties = {
  textAlign: 'center',
  lineHeight: '120px',
  color: '#fff',
  backgroundColor: '#3ba0e9',
};




</script>

<style scoped>




</style>
